<template>
  <div>
    <div class="item">
      <div class="header">
        <span>描述</span>
      </div>
      <div class="content">
        <a-input :rows="3"   v-model:value="props.nodeData.properties.remarks" placeholder="请输入描述" style="width: 100%" @change="setProperties()" />
      </div>
    </div>
    <div class="item">

      <div class="if-item" v-for="(item, index) in props.nodeData.properties.options.if" :key="index">
        <div class="header1">
          <span> {{ index===0 ? 'IF':'ELIF' }} </span>
          <span class="ai-label">CASE{{(index+1)}}</span>
        </div>
        <div class="header2">
          <a-radio-group  v-model:value="item.logic" button-style="solid">
            <a-radio-button value="AND">AND</a-radio-button>
            <a-radio-button value="OR">OR</a-radio-button>
          </a-radio-group>
          <delete-outlined style="cursor: pointer;" @click="deleteIf(index)"/>
        </div>
        <div class="header2" v-for="(field,fieldIndex) in item.conditions" :key="fieldIndex">
          <a-space>
            <a-select style="width: 130px" v-model:value="field.id" placeholder="请选择" @change="handleFieldChange">
              <a-select-option v-for="preItem in prevVariables" :key="preItem.id" :value="preItem.id">
                {{ preItem.nodeName }}/{{ preItem.name }}
              </a-select-option>
            </a-select>
            <a-select v-model:value="field.operator"  style="width: 130px">
              <a-select-option v-for="operator in operators" :key="operator.value" :value="operator.value">
                {{ operator.label }}
              </a-select-option>
            </a-select>
            <a-input v-model:value="field.value" placeholder="请输入值"></a-input>
          </a-space>
          <delete-outlined style="cursor: pointer;" @click="deleteConditions(item,fieldIndex)"/>
        </div>
        <div class="header2">
          <a-button type="link" @click="addConditions(item)" >+ 添加条件</a-button>
        </div>
      </div>


      <div class="item">
        <a-button type="primary" @click="addIf" style="width: 100%">添加分支</a-button>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>ELSE</span>
      </div>
      <div class="content">
        <span class="ai-label">当以上条件都不满足时，执行此分支</span>
      </div>
    </div>
    <div class="item">
      <div class="header">
        <span>输出变量</span>
      </div>
      <div class="content">
        <div style="display: flex; flex-direction: column">
          <span class="ai-label">index&lt;number&gt; 分类索引</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
import { getPreNodes } from '../../../../utils/flowNodeUtils';
const props = defineProps({
  nodeData: Object,
  lf: Object || String
});

const operators=[
  { label: "等于", value: "EQUALS" },
  { label: "不等于", value: "NOT_EQUALS" },
  { label: "包含", value: "CONTAINS" },
  { label: "不包含", value: "NOT_CONTAINS" },
  { label: "小于", value: "LT" },
  { label: "小于等于", value: "LTE" },
  { label: "大于", value: "GT" },
  { label: "大于等于", value: "GTE" },
  { label: "长度等于", value: "LEN_EQ" },
  { label: "长度小于", value: "LEN_LT" },
  { label: "长度小于等于", value: "LEN_LTE" },
  { label: "长度大于", value: "LEN_GT" },
  { label: "长度大于等于", value: "LEN_GTE" },
  { label: "为空", value: "EMPTY" },
  { label: "不为空", value: "NOT_EMPTY" }];
const prevNodes = ref([]);
const prevVariables = computed(() => {
  if (prevNodes.value.length === 0) return [];

  return prevNodes.value.flatMap(prevNode => {
    // 开始节点使用inputParams，其他节点使用outputParams
    const params = prevNode.type === 'start' ? prevNode.properties.inputParams : prevNode.properties.outputParams;

    var dd =
      Array.isArray(params) && params.length > 0
        ? params.map(param => ({
            nodeId: prevNode.id,
            nodeName: prevNode.properties.text,
            field: param.field,
            name: param.name,
            type: param.type,
            id: prevNode.id + '_' + param.field
          }))
        : [];
    console.log(dd);
    return dd;
  });
});

watch(
  () => props.nodeData,
  nodeDataChange => {
    var nodes = getPreNodes(props.nodeData, props.lf.graphModel);
    prevNodes.value = nodes;
  },
  {
    immediate: true
  }
);

const setProperties = () => {
  props.nodeData.properties.options.if.forEach(item => {

    item.conditions.forEach(field => {
      if (field.id) {
        var items = field.id.split('_');
        field.field = items[1];
        field.nodeId = items[0];
      }
    });
    
  });
  props.lf.setProperties(props.nodeData.id, props.nodeData.properties);
};
watch(
  () => props.nodeData.properties.options,
  dataChange => {
   setProperties();
  },
  {
    immediate: true,
    deep: true
  }
);


const addConditions = field => {
  field.conditions.push({
    id: null,
    nodeId: '',
    field: '',
    operator: 'EQUALS',
    value: ''

  });
};
const deleteConditions =(item,fieldIndex) =>{
  item.conditions.splice(fieldIndex, 1);

};
const addIf = () => {
  props.nodeData.properties.options.if.push({
    logic: 'AND',
    conditions: [
      {
        id: null,
        nodeId: '',
        field: '',
        operator: 'EQUALS',
        value: ''
      }
    ]
  });
};
const deleteIf = index => {
  props.nodeData.properties.options.if.splice(index, 1);

};


</script>
<style  lang='less' scoped>
.if-item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .header2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}

.item {
  padding-top: 4px;
  padding-bottom: 4px;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    border-radius: 4px;
    padding: 2px;
  }
  .content {
    background-color: #fff;
  }
}

.case-item {
  margin-bottom: 8px;
  position: relative;
}

.case-item .case-header {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 11px;
  height: 30px;
  border-radius: 3px 0 0;
  background-color: #fff;
  z-index: 2;
  pointer-events: none;
  padding: 2px 11px;
  display: flex;
  justify-content: space-between;
}

.case-item .case-header .case-label {
  color: #999;
}

.case-item .case-header .case-action .app-iconify {
  cursor: pointer;
  pointer-events: auto;
}

.case-item .case-header .case-action .delete {
  transition: color 0.15s;
}

.case-item .case-header .case-action .delete:hover {
  color: #ff4d4f;
}

.case-item .case-input {
  padding-top: 32px;
}
.ai-label {
  color: rgb(170, 170, 170);
  font-size: 14px;
}
</style>